<template>
  <div class="home">
    <div class="top">
      <i class="el-icon-back"></i>
      <span> YUNNUO </span>
    </div>
    <div class="content">
      <div class="left">
        <div class="Left">
          <el-row class="tac">
            <el-col :span="12">
              <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
              >
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>照片库</span>
                  </template>
                  <el-menu-item index="1-1" @click="changePic(1)"
                    >所有照片</el-menu-item
                  >
                  <el-menu-item index="1-2" @click="changePic(2)"
                    >未分类</el-menu-item
                  >
                  <el-menu-item index="1-3" @click="changePic(3)"
                    >无标签</el-menu-item
                  >
                  <el-menu-item index="1-4" @click="changePic(4)"
                    >回收站</el-menu-item
                  >
                </el-submenu>
                <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>智能分类</span>
                  </template>
                  <el-menu-item index="2-1" @click="changePic(5)"
                    >人物</el-menu-item
                  >
                  <el-menu-item index="2-2" @click="changePic(6)"
                    >风景</el-menu-item
                  >
                  <el-menu-item index="2-3" @click="changePic(7)"
                    >动物</el-menu-item
                  >
                  <el-menu-item index="2-4" @click="changePic(8)"
                    >美食</el-menu-item
                  >
                  <el-menu-item index="2-5" @click="changePic(9)"
                    >其他</el-menu-item
                  >
                </el-submenu>
                <el-submenu index="3">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>功能</span>
                  </template>
                  <el-menu-item index="3-1">上传图片</el-menu-item>
                  <el-menu-item index="3-2">编辑图片</el-menu-item>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="right">
        <ul>
          <li v-for="(item, index) in pic_now" :key="index">
            <div class="demo-image__preview">
              <el-image
                style="width: 2.62rem; height: 1.48rem;display:block"
                :src="item.url"
                :preview-src-list="item.url"
              >
              </el-image>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      num: 0,
      pic_now: [],
      pic_all: [
        {
          id: 1,
          url: "/img/all/p1.png",
        },
        {
          id: 2,
          url: "/img/all/p2.png",
        },
        {
          id: 3,
          url: "/img/all/p3.png",
        },
      ],
      pic_unassorted: [
        {
          id: 1,
          url: "/img/unassorted/p1.png",
        },
        {
          id: 2,
          url: "/img/unassorted/p2.png",
        },
        {
          id: 3,
          url: "/img/unassorted/p3.png",
        },
      ],
      pic_notags: [
        {
          id: 1,
          url: "/img/notags/p1.png",
        },
        {
          id: 2,
          url: "/img/notags/p2.png",
        },
        {
          id: 3,
          url: "/img/notags/p3.png",
        },
      ],
      pic_bin: [
        {
          id: 1,
          url: "/img/bin/p1.png",
        },
        {
          id: 2,
          url: "/img/bin/p2.png",
        },
        {
          id: 3,
          url: "/img/bin/p3.png",
        },
      ],
      pic_i1: [
        {
          id: 1,
          url: "/img/i1/p1.png",
        },
        {
          id: 2,
          url: "/img/i1/p2.png",
        },
        {
          id: 3,
          url: "/img/i1/p3.png",
        },
      ],
      pic_i2: [
        {
          id: 1,
          url: "/img/i2/p1.png",
        },
        {
          id: 2,
          url: "/img/i2/p2.png",
        },
        {
          id: 3,
          url: "/img/i2/p3.png",
        },
      ],
      pic_i3: [
        {
          id: 1,
          url: "/img/i3/p1.png",
        },
        {
          id: 2,
          url: "/img/i3/p2.png",
        },
        {
          id: 3,
          url: "/img/i3/p3.png",
        },
      ],
      pic_i4: [
        {
          id: 1,
          url: "/img/i4/p1.png",
        },
        {
          id: 2,
          url: "/img/i4/p2.png",
        },
        {
          id: 3,
          url: "/img/i4/p3.png",
        },
      ],
      pic_i5: [
        {
          id: 1,
          url: "/img/i5/p1.png",
        },
        {
          id: 2,
          url: "/img/i5/p2.png",
        },
        {
          id: 3,
          url: "/img/i5/p3.png",
        },
      ],
    };
  },
  computed: {},
  methods: {
    changePic(num) {
      console.log(num);
      switch (num) {
        case 1:
          this.pic_now = this.pic_all;break;
        case 2:
          this.pic_now = this.pic_unassorted;break;
        case 3:
          this.pic_now = this.pic_notags;break;
        case 4:
          this.pic_now = this.pic_bin;break;
        case 5:
          this.pic_now = this.pic_i1;break;
        case 6:
          this.pic_now = this.pic_i2;break;
        case 7:
          this.pic_now = this.pic_i3;break;
        case 8:
          this.pic_now = this.pic_i4;break;
        case 9:
          this.pic_now = this.pic_i5;break;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.el-col-12 {
  width: 100%;
}
::v-deep .el-submenu__title {
  min-width: 200px;
}
.top {
  width: 100%;
  background-color: rgb(245, 245, 245);
  height: 45px;
  i {
    line-height: 45px;
    margin-left: 20px;
  }
  span {
    font-weight: 100;
    line-height: 45px;
  }
}
.content {
  display: flex;
  .left {
    width: 200px;
    height: 4.8rem;
  }
  .right {
    flex: 1;
    height: 500px;
    background-color: #fff;
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      margin-top: 25px;
      li{
        list-style: none;
        border: 1px gray solid;
      }
    }
  }
}
</style>
